<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/src/initializer.js"></script>
    <title>用户信息</title>
    <style>
        .my-info {
            max-width: 520px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card class="my-info" v-loading="loading">
            <div slot="header">
                <span>个人信息</span>
            </div>
            <el-form ref="userInfoForm" :model="userInfo">
                <div>用户名：</div>
                <el-form-item prop="username">
                    <div v-if="!modifyMode">{{userInfo.username}}</div>
                    <el-input v-else style="width: 480px" v-model="userInfo.username"></el-input>
                </el-form-item>
                <div>邮箱：</div>
                <el-form-item prop="email">
                    <div v-if="!modifyMode">{{userInfo.email ? userInfo.email : '未填写邮箱'}}</div>
                    <el-input v-else style="width: 480px" v-model="userInfo.email"></el-input>
                </el-form-item>
                <div>权限用户：</div>
                <el-form-item>
                    <div>{{userInfo.admin ? '管理员' : '普通用户'}}</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="!modifyMode" @click="modifyMode = !modifyMode">编辑</el-button>
                    <template v-else>
                        <el-button type="warning" @click="modifyMode = !modifyMode">取消</el-button>
                        <el-button type="success" @click="modifyUserInfo">保存</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
<script>
    function render() {
        new Vue({
            el:'#app',
            data: {
                userInfo: {
                    username: "加载中",
                    email: "",
                    admin: 0,
                },
                isLogin: false,
                modifyMode: false,
                loading: false
            },
            mounted() {
                this.getUserInfo();
            },
            methods: {
                getUserInfo(){
                    axios(Api.getUserInfo()).then(e => {
                        this.userInfo = e.data
                        this.isLogin = true
                    }).catch(e => {
                        this.isLogin = false
                        if(e.response){
                            this.$alert(e.response.data.message)
                        } else {
                            this.$alert("网络错误")
                        }
                    })
                },
                modifyUserInfo(){
                    this.loading = true
                    axios(Api.modifyUserInfo(this.userInfo)).then(_ => {
                        this.loading = false
                        this.modifyMode = false
                        this.$message('修改成功')
                    }).catch(e => {
                        this.$alert(e.response.data.message)
                        this.loading = false
                        this.modifyMode = false
                    })
                }
            }
        })
    }
    init(['header']).then(render)
</script>
</body>

</html>